<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="progress" :pullDownRefresh="false" :pullUpLoad="false">
      <div class="relatedId" on-tap="goOrderPage(lst.orderId)">
        <div>关联订单号 : {{lst.orderNumber}}</div>
        <i></i>
      </div>
      <div class="progress-wrapper">
        <div class="detail-area" style="margin-top:0">
          <div class="detail-content" style="border:none">
             <div class="img-area">
                 <img :src="lst.image" alt="图片">
             </div>
             <div class="content-area">
                 <div class="title">{{lst.goodsName}}</div>
                 <div class="price">价值： ￥{{(lst.price/100).toFixed(2)}}</div>
                 <div class="sku">
                     <div class="sku-item" v-for="c in lst.standard" :key="c.id">{{c.name}}</div>
                 </div>
             </div>
          </div>
        </div>
      </div>
      <div class="process-title">
          <div class="title">{{processTitle}}</div>
      </div>
      <div class="process-area">
        <div class="process-item" v-for="(i,index) in lst.stateProgress" :Key="i.id">
          <div class="left-area">
            <div class="top-line"></div>
            <div class="circle-line" :class="{'active': index == 0}">
              <div></div>
            </div>
            <div class="bottom-line"></div>
          </div>
          <div class="right-area">
            <div class="title">{{i.state}}</div>
            <div class="process-content">{{i.stateDesc}}</div>
            <div class="time">{{i.applyTime}}</div>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
export default {
  name: 'progress',
  data: function(){
    return {
      headers: {
        title: "申请进度"
      },
      lst: [],
      processTitle: ""
    }
  },
  components: {
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    goOrderPage: function(id){
      // $state.go("orderDetailLs",{id: id})
    }
  },
  mounted: function(){
    if(localStorage.processList){
      this.lst = JSON.parse(localStorage.processList);
      this.lst.stateProgress.reverse();
      this.processTitle = this.lst.category == "return" ? "退货" : this.lst.category == "repair" ? "维修" : "换货";
    }
  },
}
</script>
<style lang="scss" scoped>
.outer {
  height: 100%;
  width: 100%;
  position: absolute;
}
  .process-title {
    background: #fff;
    margin-top: 12px;
    padding: 0 16px;
    & .title {
      height: 50px;
      border-bottom: 1px solid #eee;
      line-height: 50px;
      font-size:14px;
      color: #4c5b71;
      text-align: center;
    }
  }
  .relatedId {
    margin-top: 12px;
    padding: 0 16px;
    background: #fff;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>div {
      width: 100%; 
      height: 40px;
      line-height: 40px;
      color: #666;
      border-bottom: 1px solid #eee;
    }
    &>i {
      display: block;
      width: 15px;
      height: 15px;
      background: url('../../assets/img/comm/login_arrow_small@3x.png') 0 0 no-repeat;
      background-size: 50%;
      background-position: 64% 64%;
    }
  }
  .process-area {
      background: #fff;
      padding: 29px 16px;
      padding-bottom: 0;
      & .process-item {
        width: 100%;
        height: 89px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        & .left-area {
          width: 26px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          & .top-line {
            width: 0;
            height: 3px;
            border: 1px solid #e7effe;
          }
          & .circle-line {
            width: 12px;
            height: 12px;
            border: 1px solid #e7effe;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #e7effe;
            &>div {
              width: 50%;
              height: 50%;
              border-radius: 50%;
              background: #e7effe;
            }
          }
          & .active {
            background: none;
            border: 1px solid #4c5b71;
            &>div {
              background: #4c5b71;
            }
          }
          &>.bottom-line {
            width: 0;
            height: 75px;
            border: 1px solid #e7effe;
          }
        }
        & .right-area {
          width: 291px;
          height: 100%;
          font-size: 13px;
          color: #999;
          line-height: 19px;
          & .title {
            font-size: 16px;
            color: #333;
            margin-bottom: 7px;
            line-height: 16px;
          }
          & .process-content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
        &:first-child {
          &>.left-area {
            & .top-line {
              visibility: hidden;
            }
          }
        }
        &:last-child {
          &>.left-area {
            & .bottom-line {
              visibility: hidden;
            }
          }
        }
      }
  }
</style>